<template>
  <div class="cost-summary">
    <ProTable
      ref="qr_flow"
      :immediate="true"
      :request="queryQrFlowList"
      :search-form="formList"
      :columns="columns"
      :pagination="true"
      :before-search-submit="beforeSearchSubmit"
    >
    </ProTable>
  </div>
</template>

<script>
import ProTable from '@/components/ProTable';
import {omit} from 'lodash';

import { queryQrFlowList,getQrFlowQueryEnum } from '@/api/payment';

import { getDateRangeDate } from '@/utils/date'
import util from '@/utils/util'
import Authc from "@/components/Authc";

export default {
  name: 'QrFlow',
  components: {
    ProTable,
    Authc
  },
  data() {
    return {
      formList: [
        {
          type: 'input',
          name: 'orderId',
          label: '订单号',
          value: '',
          props: {
            placeholder: '请输入'
          }
        },
        {
          type: 'input',
          name: 'flowId',
          label: '支付流水',
          value: '',
          props: {
            placeholder: '请输入'
          }
        },
        {
          type: 'input',
          name: 'userId',
          label: '用户id',
          value: '',
          props: {
            placeholder: '请输入'
          }
        },
        {
          type: 'input',
          name: 'qrNo',
          label: 'C2B 码',
          value: '',
          props: {
            placeholder: '请输入'
          }
        },
        {
          type: 'input',
          name: 'accNo',
          label: '账号/token',
          value: '',
          props: {
            placeholder: '请输入'
          }
        },
        {
          type: 'select',
          name: 'payStatus',
          label: '支付状态',
          value: '',
          props: {
            placeholder: '请选择',
            optionList: [],
            clearable:true
          }
        },
        {
          type: 'select',
          name: 'addnStatus',
          label: '附加处理状态',
          value: '',
          props: {
            placeholder: '请选择',
            optionList: [],
            clearable:true
          }
        },
        {
          type: 'select',
          name: 'tradeStatus',
          label: '交易状态',
          value: '',
          props: {
            placeholder: '请选择',
            optionList: [],
            clearable:true
          }
        },
        {
          type: 'range',
          name: 'date',
          label: '创建时间',
          value: '',
          props: {
            placeholder: '请选择',
            format: 'yyyy年MM月dd日'
          }
        },
      ],
      columns: [
        {
          title: '二维码订单号',
          width: 185,
          key: 'orderId',
          render: (h, params) => {
            return h('div', [
              h(
                'a',
                {
                  on: {
                    click: () => this.gotoQrOrderDetail(params.row)
                  }
                },
                params.row.orderId
              )
            ]);
          }
        },
        {
          title: '支付流水号',
          width: 175,
          key: 'flowId'
        },
        {
          title: '用户id',
          width: 195,
          key: 'userId'
        },
        {
          title: '用户账号/token',
          width: 195,
          key: 'accNo'
        },
        {
          title: '订单金额',
          width: 100,
          key: 'amount',
          render: (h, params) => {
            return h("span", util.getYuan(params.row.amount));
          }
        },
        {
          title: '支付金额',
          width: 100,
          key: 'payAmount',
          render: (h, params) => {
            return h("span", util.getYuan(params.row.payAmount));
          }
        },
        {
          title: '优惠金额',
          width: 100,
          key: 'couponAmount',
          render: (h, params) => {
            return h("span", util.getYuan(params.row.couponAmount));
          }
        },
        {
          title: '退款金额',
          width: 100,
          key: 'refundAmount',
          render: (h, params) => {
            return h("span", util.getYuan(params.row.refundAmount));
          }
        },
        {
          title: '支付状态',
          key: 'payStatus',
          width: 150,
          render: (h, params) => {
            if (params.row.payStatus === 'wait' ) {
              return h('Tag', {props: {color: 'default'}}, params.row.payStatusName)
            }
            if (params.row.payStatus === 'success') {
              return h('Tag', {props: {color: 'success'}}, params.row.payStatusName)
            }
            if (params.row.payStatus === 'fail') {
              return h('Tag', {props: {color: 'error'}}, params.row.payStatusName)
            }
            return h('Tag', {props: {color: 'warning'}}, params.row.payStatusName)
          }
        },
        {
          title: '附加处理',
          width: 150,
          key: 'addnStatusName',
          render: (h, params) => {
            if (params.row.addnStatus === '0'||params.row.addnStatus === 0 ) {
              return h('Tag', {props: {color: 'default'}}, params.row.addnStatusName)
            }
            if (params.row.addnStatus === '1'||params.row.addnStatus === 1 ) {
              return h('Tag', {props: {color: 'success'}}, params.row.addnStatusName)
            }
            return h('Tag', {props: {color: 'error'}}, params.row.addnStatusName)
          }
        },
        {
          title: '交易状态',
          width: 150,
          key: 'tradeStatusName',
          render: (h, params) => {
            return h('Tag', {props: {color: 'default'}}, params.row.tradeStatusName)
          }
        },
        {
          title: 'C2B 码',
          width: 150,
          key: 'qrNo'
        },
        {
          title: '付款凭证号',
          width: 150,
          key: 'voucherNum'
        },
        {
          title: '商户名称',
          width: 150,
          key: 'merchantName'
        },
        {
          title: '支付时间',
          width: 150,
          key: 'flowTime'
        },
        {
          title: '创建时间',
          width: 150,
          key: 'createTime'
        },
        {
          title: '操作',
          width: 100,
          fixed:"right",
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'a',
                {
                  on: {
                    click: () => this.gotoDetail(params.row)
                  }
                },
                '明细'
              )
            ]);
          }
        }
      ]
    };
  },
  computed: {

  },
  async created() {
    await this.initSearchValue()
  },
  methods: {
    queryQrFlowList,
    exportExcelAll () {

    },
    gotoQrOrderDetail(row) {
      this.$router.push({
        path: '/qr/qrOrderDetail', query: { orderId: row.orderId }
      });
    },
    gotoDetail(row) {
      this.$router.push({
        path: '/pay/admin/payCenter/qrFlowDetail', query: { flowId: row.flowId }
      });
    },

    beforeSearchSubmit(data) {
      const { date } = data
      const [startDate, endDate] = getDateRangeDate(date)
      console.log(startDate, endDate)
      if(startDate){
        data.createTimeBegin = util.formatDate(startDate)
      }
      if(endDate){
        data.createTimeEnd = util.formatDate(endDate)
      }
      return omit(data, 'date')
    },

    async initSearchValue() {
      const {data} = await getQrFlowQueryEnum()
      if(data && data.ret===0){
        const selectRevenueTypeList = data.data["tradeStatus"].map(({code, desc}) => {
          return {
            value: code,
            label: desc
          };
        });
        this.setSearchOptionListInitValue("tradeStatus", selectRevenueTypeList)

        const payStatusList = data.data["payStatus"].map(({code, desc}) => {
          return {
            value: code,
            label: desc
          };
        });
        this.setSearchOptionListInitValue("payStatus", payStatusList)

        const addnStatusList = data.data["addnStatus"].map(({code, desc}) => {
          return {
            value: code,
            label: desc
          };
        });
        this.setSearchOptionListInitValue("addnStatus", addnStatusList)
      }
    },
    setSearchOptionListInitValue(name,value){
      this.formList.map(item=>{
        if(item.name===name && item.props){
          item.props.optionList=value
        }
      })
    }

    }
};
</script>
